<template lang='pug'>
	div.wraper
		img(src="./images/yi.png", alt="", width="57")
		h2 苏宁支付
		p.c-msg 苏宁云商旗下第三方支付
		div.line
		div.c-price &yen; {{ info.payAmount | formatPrice }}
		p.c-number 本次消费共计{{info.totalProduct}}件商品

		<popup-picker v-if="info.overdueFlag == '1' && !deliveryValue.length" class="delivery-time-cart3-gopay" title="去支付" :data="deliveryList" :columns="1" v-model="deliveryValue" ref="picker" @on-change="deliveryTime" show-name>
			<i></i>
		</popup-picker>
		a.gopay(v-else href="javascript:;", @click="gotopay") 去支付

		p.activity(v-if="info.activityMsg" v-text="info.activityMsg")
		template(v-if="info.isPickUp==0")
			template(v-if="deliveryValue.length")
					p.c-time(v-if="valueName[1] == '一小时急速达'") * 订单支付后预计1小时内送达，为了保证商品及时送到您的手上，请尽快完成支付。
					p.c-time(v-else) * 订单支付后预计({{valueName[0]}} {{ valueName[1] }})送达，为了保证商品及时送到您的手上，请尽快完成支付。
			template(v-else)
				p.c-time(v-if="info.overdueFlag == '1'") 您选择的送货时间({{ info.expressTime }})已经失效，请重新选择送货时间
				p.c-time(v-else-if="info.orderType == '0'") 订单支付后预计1小时内送达，为了保证商品及时送到您的手上，请尽快完成支付。
				p.c-time(v-else-if="info.orderType == '1'") 订单支付后预计({{ info.expressTime }})送达，为了保证商品及时送到您的手上，请尽快完成支付。
				p.c-time(v-else) 为了保证商品准时送达到您的手上，请尽快完成支付。
		template(v-else)
			p.c-time(v-if="info.overdueFlag == '1'") 您选择的送货时间({{ info.expressTime }})已经失效，请重新选择送货时间
			p.c-time(v-else) * 订单支付后请于 {{info.expressTime}} 前往苏鲜生自提取货

		<popup-picker v-if="info.overdueFlag == '1'" class="delivery-time-cart3" title="选择送货时间" :data="deliveryList" :columns="1" v-model="deliveryValue" ref="picker" @on-change="deliveryTime" show-name>
			<i></i>
		</popup-picker>

		<cart-validation-failed v-if="invalidItems && invalidItems.length" :invalid-items="invalidItems" :cart-step="3"></cart-validation-failed>
</template>

<script>
	import { PopupPicker } from 'vux'
	import fetch from '@/config/fetch'
	import { tps, wpay } from '@/config/env'
	import router from '@/router/index'
	import cartValidationFailed from '../common/cartValidationFailed'

	export default {
		name: 'cart',
		data(){
			return {
				info: {
					payAmount: 0
				},
				showPicker: false,
				deliveryList: [],
				deliveryValue: [],
				invalidItems: null
			}
		},
		components: {  
			PopupPicker, cartValidationFailed
		},
		created(){
			this.$store.commit('showMask', true)
		},
		mounted (){

		},
		created(){
			fetch({
				url: tps + '/app/cart3/showCart3Info.do',
				params: {
					app: 'wap',
					appVersion: '3.2.2',
					orderId: this.$route.params.orderid
				},
				jsonp: 'callBack'
			}).then((info) => {
				this.$store.commit('showMask', false)
				console.log(info)
				if (info.code==1) {
					this.info = info.data
				}else{
					alert(info.msg)
				}

				this.buildDeliveryList();
			});
		},
		methods: {
			 gotopay(){
				if (this.info.overdueFlag == '1' && !this.deliveryValue.length) {
					return $('.delivery-time-cart3 .weui-label').trigger('singleTap');
				}

				let willpost = { 
					orderId: this.$route.params.orderid,
					orderSource: 'wap',
					wapReturnUrl: this.getReturnUrl(),
					app: "wap",
					appVersion: "3.2.2" 

					//selectStrategy: 0
					//expressTime: this.info.expressTime
				}
				if(this.info.overdueFlag == '1'){
					willpost.selectStrategy = this.info.orderType == '0' ? '0' : '1';
					if(willpost.selectStrategy){
						willpost.expressTime = this.deliveryValue.join(' ') ;
					}
				}
				fetch({
					url: tps + '/app/beforePayVilidate/submitPay.do',
					params: {
						data: JSON.stringify(willpost)
					},
					jsonp: 'callBack'
				}).then((info) => {
					console.log(info)
					if (info.code==1) {
						var sdk = info.data.sdkString
						this.PostSubmit(sdk)
					}else{
						this.invalidItems = info.data.errorInfos;
						// alert(info.msg)
					}
				});
			},
			PostSubmit (data) {
				var postUrl = wpay + '/epps-pwg/routeGateway/ego/paymentOrder.htm';//提交地址  
				var postData = data;//第一个数据
				var ExportForm = document.createElement("FORM");  
				document.body.appendChild(ExportForm);  
				ExportForm.method = "POST";
				for(let i =0,arr = data.split('&'),l = arr.length; i<l;i++){
					var newElement = document.createElement("input");  
					if(arr[i].indexOf('signature')==-1 && arr[i].indexOf('returnUrl')==-1){
						let splits = arr[i].split('=') 
						var name = splits[0]
						newElement.value = splits[1]
					}
					else{
						if(arr[i].indexOf('signature')!=-1){
							var name = 'signature'
							newElement.value = arr[i].substring(10)
						}
						else if(arr[i].indexOf('returnUrl')!=-1){
							var name = 'returnUrl'
							newElement.value = arr[i].substring(10)
							//debugger
							//newElement.value = this.getReturnUrl()
						}
					}
					newElement.setAttribute("name", name);  
					newElement.setAttribute("type", "hidden");
					ExportForm.appendChild(newElement);   
				}
				ExportForm.action = postUrl;
				//debugger
				ExportForm.submit();  
			},
			getReturnUrl(){
				var url = location.href.toString()
				var result = url.replace('cart3','cart4')
				return result
			},

			deliveryTime(value, name){
				// this.deliveryValue = value;
			},

			buildDeliveryList() {
				if (!this.info.arrivalTimeInfos || !this.info.arrivalTimeInfos.length) return;

				// 封装时间选择
				this.info.arrivalTimeInfos.forEach((ov, oi)=>{
					
					let times = {
						name: ov.date+' '+ (ov.desc||''),
						value: ov.date,
						parent: 0
					}
					this.deliveryList.push(times)

					// 存入二级目录
					ov.selectTimes.forEach((tv, ti)=>{
						if(oi==0&&ti==0){
							//this.deliveryValue = tv.flag==0?([tv.time]):([ov.date,tv.time])
							// this.deliveryValue = [ov.date,tv.time]
						}
						//oi==0&&ti==0&&(this.deliveryValue=[tv.time])
						let times = {
							name: oi==0&&ti==0&&tv.flag==0?'一小时急速达':tv.time,
							value: tv.time,
							parent: ov.date,
							flag: tv.flag
						}
						this.deliveryList.push(times)
					})
				})
			}
		},
		computed: {
			valueName() {
				let arr = [];

				this.deliveryValue.forEach(itemV => {
					this.deliveryList.forEach(itemL => {
						if (itemV == itemL.value) {
							arr.push(itemL.name);
						}
					});
				});

				return arr;
			}
		}

		,beforeRouteLeave (to, from, next, redirect) {
			let h = 24;
			if (this.info.orderType == '2') {
				h = 1;
			}

			if(to.path.indexOf('cart2') != -1){
				AlertBox({
					type:'doubleBtn',
					msg:`订单已提交成功，${h}小时未支付会取消订单，请尽快完成支付。`,
					confirmText:'取消支付',
					cancelText: '继续支付',
					confirm: function(){
						next({path: '/orders'})
					}
				})
			}else if(from.fullPath.indexOf('orderlist') != -1){
				AlertBox({
					type:'doubleBtn',
					msg:`订单已提交成功，${h}小时未支付会取消订单，请尽快完成支付。`,
					confirmText:'取消支付',
					cancelText: '继续支付',
					confirm: function(){
						next(true)
					}
				})
			}else if(from.fullPath.indexOf('orderdetail') != -1){
				AlertBox({
					type:'doubleBtn',
					msg:`订单已提交成功，${h}小时未支付会取消订单，请尽快完成支付。`,
					confirmText:'取消支付',
					cancelText: '继续支付',
					confirm: function(){
						next(true)
					}
				})
			}else{
				next(true)
			}
		}
	}
</script>

<style lang="scss" scoped>

	@function _($px) {
		$rem: $px/50;
		@return #{$rem}rem;
	}

	.wraper{
		text-align: center;
		img{
			display: block;
			margin: _(190) auto 0;
		}
		h2{
			font-size: _(62);
			color: #4b8de3;
			margin-top: _(24);
		}
		.c-msg{
			font-size: _(28);
			color:#cdcdcd;
		}
		.line{
			width: _(562);
			height: 1px;
			background-color: #e6e6e6;
			margin: _(20) auto 0;
		}
		.c-price{
			font-size: _(65);
			color: #444444;
			margin-top: _(24);
		}
		.c-number{
			font-size: _(24);
			color:#9d9d9d;
			margin-top: _(15);
		}
		.gopay{
			display: block;
			background: #ff7d37;
			width: _(470);
			height: _(130);
			line-height: _(130);
			font-size: _(70);
			text-align: center;
			color:#fff;
			border-radius: _(130);
			margin: _(20) auto 0;
		}
		.c-time{
			width: _(600);
			color:#999999;
			margin: _(40) auto 0;
		}
		.activity {
			margin-top: _(20);
			margin-bottom: _(-20);
			line-height: 1.2;
			color: #444;
			font-size: _(28);
			text-align: center;
		}
	}
</style>

<style lang="scss">
/* 覆盖控件样式 */
@function _($px) {
	$rem: $px/50;
	@return #{$rem}rem;
}
.delivery-time-cart3 {
	.weui-cell {
		display: block;
	}
	.weui-cell__hd {
		margin: _(20) auto 0;
		width: _(260);
	}
	.weui-label {
		display: block;
		width: _(260);
		height: _(80);
		line-height: _(80);
		text-align: center;
		color: #F90;
		border: solid 1px #F90;
		border-radius: _(10);
	}
	&:before {
		display: none;
	}
	.vux-popup-picker-value {
		display: none;
	}
	.vux-tap-active:active {
		background: none;
	}
}

.delivery-time-cart3-gopay {
	.weui-cell {
		display: block;
	}
	.weui-cell__hd {
		margin: 0 auto;
		width: _(470);
	}
	.weui-label {
		display: block;
		background: #ff7d37;
		width: _(470);
		height: _(130);
		line-height: _(130);
		font-size: _(70);
		text-align: center;
		color:#fff;
		border-radius: _(130);
		margin: _(20) auto 0;
	}
	&:before {
		display: none;
	}
	.vux-popup-picker-value {
		display: none;
	}
	.vux-tap-active:active {
		background: none;
	}
}
</style>